<template>
	<view class="container">
		<block v-if="store.is_ios_pay == 20 && platform == 'ios'">
			<u-empty text="IOS端暂不支持" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
		</block>
		<block v-else>
			<view class="bg"></view>
			<view class="header">
				<view class="left">
					<view class="text">金币充值</view>
					<view class="number">一次充值，全渠道通用</view>
				</view>
				<view class="right">
					<u-button :text="userInfo?userInfo.points+' 金币':'0.00 金币'"
						icon="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63889c845a7e3f0310de5223/6398219cd109e60012196b2c/16709144995558092144.png"
						iconColor="#f22e38" size="small"></u-button>
				</view>
			</view>
			<view class="block">
				<view class="tool">
					<view class="head">
						<view class="icon">
							<u-icon size="22"
								name="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63889c845a7e3f0310de5223/6398219cd109e60012196b2c/16709144995558092144.png">
							</u-icon>
						</view>
						<view class="title">充值套餐</view>
					</view>
					<view class="plan">
						<view class="item" :class="active == index ? 'active' : ''" @click="onClickPlan(index)"
							v-for="(item, index) in plan" :key="index">
							<view class="number">￥{{ item.money }}</view>
							<view class="price">金币：x{{ item.gift_money }}</view>
						</view>
					</view>
					<block v-if="platform == 'ios'">
						<view class="submit" v-if="store.is_ios_pay == 20">
							<u-button disabled text="由于IOS管理规范,暂不支持~!" color="#f22e38" shape="circle"></u-button>
						</view>
						<view class="submit" v-else @click="onSubmit">
							<u-button text="立即支付" color="#f22e38" shape="circle"></u-button>
						</view>
					</block>
					<block v-else>
						<view class="submit" @click="onSubmit">
							<u-button text="立即支付" color="#f22e38" shape="circle"></u-button>
						</view>
					</block>
				</view>
			</view>
			<view class="block">
				<view class="tool">
					<view class="head">
						<view class="icon">
							<u-icon size="22"
								name="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63889c845a7e3f0310de5223/6398219cd109e60012196b2c/16709144995558092144.png">
							</u-icon>
						</view>
						<view class="title">充值说明</view>
					</view>
					<view class="remarks">
						<view class="content">
							<rich-text :nodes="setting.describe"></rich-text>
						</view>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import {
		plan,
		submit
	} from '@/api/recharge.js';
	import {
		detail
	} from '@/api/user.js';
	import {
		config
	} from '@/api/system.js';
	export default {
		data() {
			return {
				userInfo: [],
				active: 0,
				plan: [],
				user: [],
				setting: [],
				store: [],
				platform: ''
			};
		},
		onLoad() {
			this.getStore()
		},
		onShow() {
			this.getPlan();
			this.getUser()
		},
		methods: {
			getUser() {
				let _this = this;
				detail({})
					.then(res => {
						_this.userInfo = res.data.userInfo;
					})
					.catch(err => {
						console.log(err);
					});
			},
			getStore() {
				let _this = this;
				config({
					key: 'store'
				}).then(res => {
					_this.store = res.data.config
					let port = uni.getSystemInfoSync().platform
					switch (port) {
						case 'android':
							console.log('运行Android上', port); //android
							this.platform = 'android'
							break;
						case 'ios':
							console.log('运行iOS上', port);
							this.platform = 'ios'
							if (_this.store.is_ios_pay == 20) {
								uni.setNavigationBarTitle({
									title: 'IOS端暂不支持'
								})
							}
							break;
						default:
							console.log('运行在开发者工具上'); //devtools
							this.platform = 'devtools'
							break;
					}
				}).catch(err => {

				})
			},
			onClickQrcode() {
				uni.navigateTo({
					url: '/pages/vehicle/qrcode/index'
				})
			},
			onSubmit() {
				let _this = this
				submit({
						planId: this.plan[this.active].plan_id
					})
					.then(res => {
						// #ifdef MP-WEIXIN
						let payment = res.data.payment;
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: payment.timeStamp,
							nonceStr: payment.nonceStr,
							package: 'prepay_id=' + payment.prepay_id,
							signType: 'MD5',
							paySign: payment.paySign,
							success: function(res) {
								uni.showToast({
									icon: 'none',
									title: '支付成功'
								});
								_this.getPlan();
								_this.getUser()
								console.log('success:' + JSON.stringify(res));
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
							}
						});
						// #endif
					})
					.catch(err => {
						console.log(err);
					});
			},
			getPlan() {
				plan({})
					.then(res => {
						this.plan = res.data.plan;
						this.user = res.data.user;
						this.setting = res.data.setting;
						let describe = this.setting.describe;
						this.setting.describe = describe.replace(/\n/g, '<br />');
					})
					.catch(err => {});
			},
			onClickPlan(index) {
				this.active = index;
			}
		}
	};
</script>

<style lang="scss">
	rich-text {
		font-size: 24rpx;
		color: #666;
		line-height: 64rpx;
	}

	.block {
		width: 100%;
		background-color: #fff;
		position: relative;
		top: -50rpx;
		left: 0rpx;
		z-index: 999;
		border-radius: 30rpx 30rpx 0rpx 0rpx;

		.tool {
			margin-top: 15rpx;

			.remarks {
				margin-top: 15rpx;
			}

			.submit {
				margin-top: 30rpx;
			}

			padding: 30rpx;

			.head {
				display: flex;
				flex-direction: row;

				.title {
					font-size: 32rpx;
					color: #333333;
					margin-left: 15rpx;
				}
			}

			.plan {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: space-between;
				margin-top: 30rpx;

				.item {
					width: 30%;
					border: 2rpx solid #d8d8d8;
					text-align: center;
					margin: 15rpx 0rpx;
					padding: 20rpx 0rpx;
					border-radius: 12rpx;

					.number {
						color: #f22e38;
						font-size: 36rpx;
						font-weight: bolder;
					}

					.price {
						color: #666666;
						font-size: 24rpx;
						margin-top: 15rpx;
					}
				}

				.active {
					border: 2rpx solid #f22e38 !important;
				}
			}
		}
	}

	.header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 80rpx 40rpx;

		.left {
			color: #fff;
			display: flex;
			flex-direction: column;
			align-items: flex-start;

			.text {
				font-size: 32rpx;
				margin-bottom: 15rpx;
			}

			.number {
				font-size: 36rpx;
				font-weight: bolder;
			}
		}

		.right {
			.u-button {
				border-radius: 40rpx !important;
			}

			.u-button__text {
				color: #f22e38 !important;
			}
		}
	}

	.bg {
		width: 100%;
		height: 320rpx;
		background-color: #f22e38;
		// background-image: url('https://img.alicdn.com/imgextra/i4/2064565174/O1CN01ue2d6w1o5k1JrdiO3_!!2064565174.jpg');
		background-repeat: no-repeat;
		background-size: contain;
		position: absolute;
		top: 0rpx;
		left: 0rpx;
		z-index: -1;
	}
</style>
